<template>
  <div class="ui-page page__has-bottom page-lesson-detail">
    <view class="page-container">
      <view class="lesson-video-box">
        <uiAliplayer
          url="http://video.yjzgo.com/c0f2a730eb10484cb7efe72235710430/3f771619079baf7933c8a6f807df9dce-ld.mp4"
        ></uiAliplayer>
      </view>
      <view class="lesson-info-basic">
        <div class="lesson-info" ref="lessoninfoRef">
          <!-- 课程名称 -->
          <div class="lesson-name">{{ lessonInfo.lessonName }}</div>
          <div class="lesson-length">
            <image class="lesson-length--icon" src="/static/images/detail/time.png" alt />
            共{{ lessonInfo.subLessonCounts }}节课
          </div>
          <div class="lesson-price ui-flex flex--space-between flex--vcenter">
            <span>
              <!-- 课程的价格 -->
              <template>
                <span
                  class="price"
                  v-if="lessonInfo.lessonPrice"
                >{{ lessonInfo.lessonPrice | currency_format('￥') }}</span>
                <span class="price" v-else>免费</span>
              </template>
              <span v-if="lessonInfo.isVipLesson === 'Y'" style="padding-left:8px;">
                <span
                  class="price"
                  v-if="lessonInfo.lessonCheapPrice"
                >VIP:{{ lessonInfo.lessonCheapPrice | currency_format('￥') }}</span>
                <span class="price" v-else>VIP:免费</span>
              </span>
            </span>

            <!-- 购买人数 -->
            <span>{{lessonInfo.payNum}}人已购买</span>
          </div>
          <div class="lesson-teacher-container">
            <div class="lesson-teacher">
              <div class="teacher-image">
                <image class="teacher-image--image" :src="lessonInfo.showPic" alt />
              </div>
              <div class="teacher-desc">
                <div class="name">
                  <div>老师：{{ lessonInfo.lecturerName }}</div>
                  <div class="shanchang">擅长法律、公证行业</div>
                </div>
                <div class="dianzan" @click="handelClickThumbsUp">
                  <span class="dianle" v-if="lessonInfo.likeFlag === 1"></span>
                  <span class="meidian" v-else></span>
                  <div class="dianzan-txt ui-txt txt-caption">点赞</div>
                </div>
              </div>
            </div>
            <div class="teacher-intro">{{ lessonInfo.lecturerInfo }}</div>
          </div>
        </div>
      </view>

      <view class="lesson-detail--tabs ui-1px-b">
        <uiTabs
          :navPerView="3"
          v-model="activeTabsIndex"
          :height="86"
          :lineHeight="6"
          lineWidth="64rpx"
        >
          <uiTabsItem title="课程介绍"></uiTabsItem>
          <uiTabsItem title="课程目录"></uiTabsItem>
          <uiTabsItem title="学员评价"></uiTabsItem>
        </uiTabs>
      </view>

      <view>
        <template v-if="activeTabsIndex === 0">
          <lessonIntroductionComp
            :content="lessonInfo.content"
            :lessonId="lessonId"
            :lecturerId="lessonInfo.lecturerId"
          ></lessonIntroductionComp>
        </template>
        <template v-if="activeTabsIndex === 1">
          <lessonCatalogueComp
            :play="play"
            :list="lessonVideoList"
            :subLessonCounts="lessonInfo.subLessonCounts"
            @player="playerVideo"
          ></lessonCatalogueComp>
        </template>
        <template v-if="activeTabsIndex === 2">
          <lessonEvaluateComp :lessonId="lessonId"></lessonEvaluateComp>
        </template>
      </view>
    </view>

    <view class="page-bottom ui-page-tabbar">
      <view class="tabbar-container goods-actions">
        <view class="tabbar__actions">
          <navigator url="/pages/home/index" open-type="switchTab" class="tabbar__action-icon">
            <uiIcon class="tabbar-action-icon__icon" name="ui-icon-wap-home-o" size="36"></uiIcon>
            <view class="tabbar-action-icon__text">首页</view>
          </navigator>
          <view class="tabbar__action-icon" @click="collectLessonFn">
            <uiIcon class="tabbar-action-icon__icon" name="ui-icon-star-o" size="36"></uiIcon>
            <view class="tabbar-action-icon__text">收藏</view>
          </view>
          <view class="tabbar__action-icon">
            <uiIcon class="tabbar-action-icon__icon" name="ui-icon-share" size="36"></uiIcon>
            <view class="tabbar-action-icon__text">分享</view>
          </view>
        </view>
        <view class="tabbar__button-submit" style="flex: 0 0 380rpx;" @click="emitBuyLessonFn">
          <view class="tabbar__action-icon">购买</view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import {
  selectLessonById,
  selectLessonMenuById,
  selectVideoForAuth
} from "@/api/order/lession.js";
import uiAliplayer from "@/components/base/player/index";

import uiIcon from "@/components/base/icon/index";
import uiTabs from "@/components/base/tabs/index";
import uiTabsItem from "@/components/base/tabs-item/index";
// 三大内容

import lessonIntroductionComp from "./components/tabs-introduction";
import lessonCatalogueComp from "./components/tabs-catalogue";
import lessonEvaluateComp from "./components/tabs-evaluate.vue";

import { url } from "@/utils/url.js";

export default {
  name: "lessonDetailPage",
  components: {
    uiIcon,
    uiAliplayer,
    uiTabs,
    uiTabsItem,
    lessonIntroductionComp,
    lessonCatalogueComp,
    lessonEvaluateComp
  },
  data() {
    return {
      activeTabsIndex: 1,
      lessonId: "",
      lessonInfo: {
        csrName: "",
        csrPhone: "",
        content: "",
        lecturerName: "",
        lessonName: "",
        lessonClass: "",
        lessonPrice: "",
        lessonPath: "",
        lessonPic: "",
        isVipLesson: "N",
        lessonCheapPrice: 0,
        video: "",
        showPic: "",
        lecturerId: "",
        // 购买人数
        payNum: 0,
        clickNum: "",
        goodNum: "",
        collectFlag: "",
        likeFlag: "",
        lecturerInfo: "",
        commentNum: "",
        // buyFlag为1是用户已购买，为2是当前是这个课程的老师，也是有权限的
        buyFlag: "",
        publish_time: "",
        totaDuration: "",
        subLessonCounts: ""
      },

      play: {
        playVideoId: "",
        status: 1,
        fileType: 1,
        videoId: ""
      },

      lessonVideoList: []
    };
  },

  onLoad(e) {
    // this.lessonId = curUrl.query.id || "353";
    this.lessonId = e.id;
    this.loadLessonById(this.lessonId);
    this.loadLessonMenuById(this.lessonId);
  },
  created() {},
  mounted() {},
  methods: {
    // 根据id查询课程详情
    loadLessonById(lessonId) {
      let params = {
        lessonId: lessonId
      };
      var self = this;
      selectLessonById(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          this.$toast.fail(respMsg);
        }
        this.lessonInfo = Object.assign({}, this.lessonInfo, result);
      });
    },
    // 根据id查询课程目录
    loadLessonMenuById(lessonId) {
      var params = {
        lessonId: lessonId
      };
      var self = this;
      selectLessonMenuById(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          self.$toast.fail(respMsg);
        }

        if (result.length) {
          let free = {
            ...result[0],
            free: true
          };
          this.lessonVideoList.push({
            label: `前言`,
            children: [free]
          });
          // 开始播放第一个视频
          // this.playerVideo({ ...result[0], free: true });
          // 保存当前课程的ID
          this.play.playVideoId = free.subLessonId;
          // 保存当前课程的ID
          this.play.status = 1;
        }
        if (result.length > 1) {
          this.lessonVideoList.push({
            label: `课程内容概要`,
            free: false,
            children: result.splice(1)
          });
        }
      });
    },

    /**
     * 处理用户点击课程切换课程播放
     *
     */
    playerVideo({ free, subLessonId }) {
      // 判断当前课程是什么类型的课程 免费的还是收费的
      if (free) {
        // 直接播放
        var params = {
          subLessonId: subLessonId
        };
        // var self = this;
        selectVideoForFree(params).then(({ respCode, respMsg, result }) => {
          if (respCode !== "0") {
            this.$toast.fail(respMsg);
            return;
          }
          this.subLessonId = subLessonId;
          this.fileType = result.fileType;
          this.videoId = result.video.vid;
          this.isFree = true;
          console.log("free = " + this.isFree);

          this.isLast = this.copyLessonVideoList.length > 1 ? false : true;
          this.videoAutoplay = false;
          return Promise.resolve({});
        });
      } else {
        // 判断用户是否登录
        // if (this.$utils.judgeUserIsVisitor(this)) return;
        // 判断用户是否购买过此课程
        if (this.lessonInfo.buyFlag === 1) {
          // 提示是否购买此课程
          this.$dialog
            .confirm({
              title: "购买课程",
              message: "是否购买此课程？",
              confirmButtonText: "立即购买"
            })
            .then(() => {
              // 跳转到课程页面
              this.emitBuyLessonFn();
            })
            .catch(() => {
              // on cancel
            });
        } else {
          // 直接播放
          var params = {
            subLessonId: subLessonId
          };
          // var self = this;
          selectVideoForAuth(params).then(({ respCode, respMsg, result }) => {
            if (respCode !== "0") {
              this.$toast.fail(respMsg);
              return;
            }
            this.play.playVideoId = subLessonId;
            this.play.fileType = result.fileType;
            this.play.videoId = result.video.vid;
            // this.videoAutoplay = true;
            this.isFree = false;

            return Promise.resolve({});
          });
        }
      }

      // this.subLessonId = item.subLessonId;
    },

    /**
     * 收藏和取消收藏
     */
    collectLessonFn() {
      var params = {
        lessonId: this.lessonId,
        collectFlag: this.lessonInfo.collectFlag == 1 ? 0 : 1
      };
      var self = this;
      collectLesson(params).then(({ respCode, respMsg, result }) => {
        if (respCode == "gateway.000001") {
          self.$router.push({
            path: "/login",
            query: {
              sid: this.$route.query.sid
            }
          });
          return;
        }
        // 点击错误
        if (respCode !== "0") {
          this.$toast.fail(respMsg);
        }
        self.lessonInfo.collectFlag = this.lessonInfo.collectFlag == 1 ? 0 : 1;
        self.$toast(result);
      });
    },

    /**
     * 处理购买课程的流程
     */
    emitBuyLessonFn() {
      this.$url.navigateTo({
        url: "/pages/buy/order-detail/index",
        query: {
          id: this.lessonId
        }
      });
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss">
</style>
